<template>
    <div class="card">
        <a-radio-group v-model:value="currentZoomLevel" @change="applyZoomLevel">
            <a-radio-button value="year">年</a-radio-button>
            <a-radio-button value="month">月</a-radio-button>
            <a-radio-button value="day">日</a-radio-button>
            <a-radio-button value="week">周</a-radio-button>
        </a-radio-group>
        1111{{ currentZoomLevel }}
        <div id="gantt_here" style="margin-top: 10px" class="gantt-container"></div>
    </div>
</template>

<script setup>
    import { reactive, toRefs, ref, onBeforeMount, onMounted, watchEffect, defineExpose } from 'vue'

    import { gantt } from 'dhtmlx-gantt'
    import 'dhtmlx-gantt/codebase/dhtmlxgantt.css'

    const data = reactive({})
    const currentZoomLevel = ref('day')
    const radio2 = ref('全部')
    const value1 = ref('')
    const value = ref('')
    let objs = reactive({
        asd1: '#f2e6c2',
        asd2: '#b5e09b',
        asd3: '#baefe2'
    })
    let dialogVisible = ref(false)

    //初始化甘特图
    const initGantt = () => {
        const tasks = {
            data: [
                // 第一个项目及其子任务
                {
                    id: 1559,
                    projectName: '傲林科技测试工厂1水泥配料',
                    parent: 0,
                    start_date: '2023-07-21',
                    duration: 1081,
                    pmName: '王喆',
                    projectDirector: '王喆',
                    open: false
                },
                {
                    id: 5105,
                    parent: 1559,
                    projectName: '准备工作',
                    start_date: '2023-07-18',
                    duration: 18,
                    progress: 43,
                    costProgress: 0
                },
                {
                    id: 5106,
                    parent: 1559,
                    projectName: '启动工作',
                    start_date: '2023-08-07',
                    duration: 18,
                    progress: 35,
                    serialNumber: '2.00'
                },
                {
                    id: 5107,
                    parent: 1559,
                    projectName: '数据预处理',
                    start_date: '2023-07-30',
                    duration: 18,
                    serialNumber: '3.00'
                },
                {
                    id: 5108,
                    parent: 1559,
                    projectName: '产品确认',
                    start_date: '2023-08-19',
                    duration: 18,
                    progress: 34,
                    serialNumber: '4.00'
                },
                {
                    id: 5109,
                    parent: 1559,
                    projectName: '数据建模',
                    start_date: '2023-07-30',
                    duration: 18,
                    progress: 0,
                    serialNumber: '5.00'
                },
                {
                    id: 5110,
                    parent: 1559,
                    projectName: '试运行',
                    start_date: '2023-07-30',
                    duration: 18,
                    progress: 1,
                    serialNumber: '6.00'
                },
                {
                    id: 5111,
                    parent: 1559,
                    projectName: '正式运行',
                    start_date: '2023-10-17',
                    duration: 18,
                    progress: 1,
                    serialNumber: '7.00'
                },
                // 第二个项目及其子任务
                {
                    id: 1560,
                    projectName: '江西上高',
                    parent: 0,
                    start_date: '2024-07-21',
                    duration: 1081,
                    pmName: '李四',
                    projectDirector: '李四',
                    open: false
                },
                {
                    id: 5112,
                    parent: 1560,
                    projectName: '准备工作',
                    start_date: '2024-07-18',
                    duration: 18,
                    progress: 43,
                    costProgress: 0
                },
                {
                    id: 5113,
                    parent: 1560,
                    projectName: '启动工作',
                    start_date: '2024-08-07',
                    duration: 18,
                    progress: 35,
                    serialNumber: '2.00'
                },
                {
                    id: 5114,
                    parent: 1560,
                    projectName: '数据预处理',
                    start_date: '2024-07-30',
                    duration: 18,
                    serialNumber: '3.00'
                },
                {
                    id: 5115,
                    parent: 1560,
                    projectName: '产品确认',
                    start_date: '2024-08-19',
                    duration: 18,
                    progress: 34,
                    serialNumber: '4.00'
                },
                {
                    id: 5116,
                    parent: 1560,
                    projectName: '数据建模',
                    start_date: '2024-07-30',
                    duration: 18,
                    progress: 0,
                    serialNumber: '5.00'
                },
                {
                    id: 5117,
                    parent: 1560,
                    projectName: '试运行',
                    start_date: '2024-07-30',
                    duration: 18,
                    progress: 1,
                    serialNumber: '6.00'
                },
                {
                    id: 5118,
                    parent: 1560,
                    projectName: '正式运行',
                    start_date: '2024-10-17',
                    duration: 18,
                    progress: 1,
                    serialNumber: '7.00'
                },
                // 第三个项目及其子任务
                {
                    id: 1561,
                    projectName: '浙江煤炭坝',
                    parent: 0,
                    start_date: '2024-07-21',
                    duration: 1081,
                    pmName: '张三',
                    projectDirector: '张三',
                    open: false
                },
                {
                    id: 5119,
                    parent: 1561,
                    projectName: '准备工作',
                    start_date: '2024-07-18',
                    duration: 18,
                    progress: 43,
                    costProgress: 0
                },
                {
                    id: 5120,
                    parent: 1561,
                    projectName: '启动工作',
                    start_date: '2024-08-07',
                    duration: 18,
                    progress: 35,
                    serialNumber: '2.00'
                },
                {
                    id: 5121,
                    parent: 1561,
                    projectName: '数据预处理',
                    start_date: '2024-07-30',
                    duration: 18,
                    serialNumber: '3.00'
                },
                {
                    id: 5122,
                    parent: 1561,
                    projectName: '产品确认',
                    start_date: '2024-08-19',
                    duration: 18,
                    progress: 34,
                    serialNumber: '4.00'
                },
                {
                    id: 5123,
                    parent: 1561,
                    projectName: '数据建模',
                    start_date: '2024-07-30',
                    duration: 18,
                    progress: 0,
                    serialNumber: '5.00'
                },
                {
                    id: 5124,
                    parent: 1561,
                    projectName: '试运行',
                    start_date: '2024-07-30',
                    duration: 18,
                    progress: 1,
                    serialNumber: '6.00'
                },
                {
                    id: 5125,
                    parent: 1561,
                    projectName: '正式运行',
                    start_date: '2024-10-17',
                    duration: 18,
                    progress: 1,
                    serialNumber: '7.00'
                },
                // 第四个项目及其子任务
                {
                    id: 1562,
                    projectName: '测试水泥',
                    parent: 0,
                    start_date: '2024-07-21',
                    duration: 1081,
                    pmName: '赵六',
                    projectDirector: '赵六',
                    open: false
                },
                {
                    id: 5126,
                    parent: 1562,
                    projectName: '准备工作',
                    start_date: '2024-07-18',
                    duration: 18,
                    progress: 43,
                    costProgress: 0
                },
                {
                    id: 5127,
                    parent: 1562,
                    projectName: '启动工作',
                    start_date: '2024-08-07',
                    duration: 18,
                    progress: 35,
                    serialNumber: '2.00'
                },
                {
                    id: 5128,
                    parent: 1562,
                    projectName: '数据预处理',
                    start_date: '2024-07-30',
                    duration: 18,
                    serialNumber: '3.00'
                },
                {
                    id: 5129,
                    parent: 1562,
                    projectName: '产品确认',
                    start_date: '2024-08-19',
                    duration: 18,
                    progress: 34,
                    serialNumber: '4.00'
                },
                {
                    id: 5130,
                    parent: 1562,
                    projectName: '数据建模',
                    start_date: '2024-07-30',
                    duration: 18,
                    progress: 0,
                    serialNumber: '5.00'
                },
                {
                    id: 5131,
                    parent: 1562,
                    projectName: '试运行',
                    start_date: '2024-07-30',
                    duration: 18,
                    progress: 1,
                    serialNumber: '6.00'
                },
                {
                    id: 5132,
                    parent: 1562,
                    projectName: '正式运行',
                    start_date: '2024-10-17',
                    duration: 18,
                    progress: 1,
                    serialNumber: '7.00'
                }
            ]
        }

        gantt.config.grid_width = 350
        gantt.config.initial_scroll = false //timeline区域是否自动初始化滚动, 用于显示更早之前的任务
        gantt.config.drag_lightbox = false //允许鼠标通过按住的lightbox头部拖拽的方式，调整lightbox的位置
        gantt.config.drag_links = false //允许通过拖拽的方式新增任务依赖的线条
        gantt.config.drag_resize = false //允许用户通过拖拽任务的条形图的两端来改变工期
        gantt.config.min_column_width = 30
        gantt.config.add_column = false //添加符号
        gantt.config.autosize = true //自适应尺寸
        gantt.config.autofit = true // 表格列宽自适应
        gantt.config.autoscroll = true // 把任务或者连线拖拽到浏览器屏幕外时，自动触发滚动效果
        gantt.config.drag_progress = false //取消任务进度条进度拖动
        gantt.config.scale_height = 60
        gantt.config.row_height = 40 //行高
        gantt.config.bar_height = 24 //时间颜色的高度
        gantt.config.date_format = '%Y-%m-%d'
        gantt.config.fit_tasks = true //自动延长时间刻度，以适应所有显示的任务
        gantt.config.auto_types = true //将包含子任务的任务转换为项目，将没有子任务的项目转换回任务
        gantt.i18n.setLocale('cn') //设置语言
      gantt.config.open_tree_initially = true;//默认展开
      gantt.config.layout = {
        css: "gantt_container",
        rows:[
          {
            cols: [
              {view: "grid", id: "grid", scrollX:"scrollHor", scrollY:"scrollVer"},
              {resizer: true, width: 1},
              {view: "timeline", id: "timeline", scrollX:"scrollHor", scrollY:"scrollVer"},
              {view: "scrollbar", scroll: "y", id:"scrollVer"}
            ]
          },
          {view: "scrollbar", scroll: "x", id:"scrollHor", height:20}
        ]
      };
      //布局
        //时间栏配置
        gantt.config.scales = [{ unit: 'day', step: 1, format: '%d' }]
        gantt.config.open_split_tasks = true
        //左侧列表配置
        gantt.config.columns = [
            { name: 'projectName', label: '项目', align: 'left', tree: true, width: 250, align: 'center' }
        ]
        //鼠标移入弹框
        gantt.templates.tooltip_text = function (start, end, task) {
            return `
        	<div style="width: 200px;height: 200px;">
                    <p>任务名称：这是一个任务</p>
                    <p>任务策划：张三</p>
        			<p>当前状态：进行中</p>
                    <p>任务类别：攻击</p>
                    <p>开始时间：2020-12-11</p>
                    <p>结束时间：2021-04-13</p>
            </div>
        	`
        }
        //更改父项图标
        gantt.templates.grid_folder = item => {
            return ''
        }
        gantt.plugins({
            marker: true,
            tooltip: true
        })
        var date_to_str = gantt.date.date_to_str(gantt.config.task_date)
        var today = new Date()
        gantt.addMarker({
            start_date: today,
            css: 'today',
            text: '今天',
            title: '今天: ' + date_to_str(today)
        })
        //更改子项图标
        gantt.templates.grid_file = item => {
            return ''
        }
        //任务条显示内容
        gantt.templates.task_text = function (start, end, task) {
            return `
			<div style="color:#454545;font-size:14px;font-weight:700;">${task.projectName}</div>
		`
        }
        // 任务条左侧配置
        gantt.templates.leftside_text = function (start, end, task) {
            return `<div class="jindu" style="width:100%;height:30px;background-color:#e6f4ff;padding-left:10px;font-size:13px;color:#629eff;"><span>当前进度${
                task.progress.toFixed(0) + '%'
            }</span></div>`
        }
        //展开树图标
        gantt.templates.grid_open = function (item) {
            return item.$open
                ? `<div class="gantt_tree_icon gantt_close">
                <MinusSquareOutlined style="color:red;"/>
               </div>`
                : `<div  class="gantt_tree_icon gantt_open">
                <PlusSquareOutlined  style="color:red;" />
               </div>`
        }

        gantt.init('gantt_here') //初始化
        console.log(gantt.config, 'asdasdasdsad')

        gantt.parse(tasks) //填充数据

        //双击事件
        gantt.attachEvent('onTaskDblClick', function (id, e) {
            // 在这里编写处理双击事件的代码
            console.log('双击了任务：' + id)
            dialogVisible.value = true
        })
    }
    // 回到今天
    const scrollToToday = () => {
        gantt.showDate(new Date())
    }
    const zoomConfig = {
        levels: {
            day: {
                scale_height: 67,
                min_column_width: 80,
                scales: [
                    {
                        unit: 'month',
                        step: 1,
                        format: '%Y %M'
                    },
                    {
                        unit: 'day',
                        step: 1,
                        format: '%d'
                    }
                ]
            },
            week: {
                scale_height: 50,
                min_column_width: 50,
                scales: [
                    {
                        unit: 'week',
                        step: 1,
                        format: function (date) {
                            var dateToStr = gantt.date.date_to_str(' %M-%d')
                            var endDate = gantt.date.add(date, -6, 'day')
                            var weekNum = gantt.date.date_to_str('%W')(date)
                            var year = gantt.date.date_to_str('%Y')(date)
                            return year + '年第' + weekNum + '周, ' + dateToStr(endDate) + ' - ' + dateToStr(date)
                        }
                    },
                    { unit: 'day', step: 1, format: '%j %D' }
                ]
            },
            month: {
                scale_height: 50,
                min_column_width: 120,
                scales: [
                    { unit: 'month', format: ' %Y-%F' }
                    // { unit: 'week', format: 'Week %W' }
                ]
            },
            year: {
                scale_height: 50,
                min_column_width: 30,
                scales: [{ unit: 'year', step: 1, format: '%Y' }]
            }
        }
    }
    onBeforeMount(() => {})
    onMounted(() => {
        initGantt()
        applyZoomLevel()
        scrollToToday()
    })

    const applyZoomLevel = e => {
        const config = zoomConfig.levels[currentZoomLevel.value]
        console.log(config, 'config')
        gantt.config.scale_height = config.scale_height
        gantt.config.min_column_width = config.min_column_width
        gantt.config.scales = config.scales
        gantt.render()
    }
</script>
<style scoped lang="less">
    ::-webkit-scrollbar {
        width: 10px;
    }

    ::-webkit-scrollbar-track {
        background-color: #f1f1f1;
    }

    ::-webkit-scrollbar-thumb {
        background-color: #888;
        border-radius: 5px;
    }

    ::-webkit-scrollbar-thumb:hover {
        background-color: #555;
    }

    .renwus {
        width: 100%;
        height: 200px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        flex-wrap: wrap;
        overflow: auto;
    }

    .renwu {
        width: 100%;
        height: 200px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        flex-wrap: wrap;
    }

    :deep(.el-progress-circle) {
        width: 100px !important;
        height: 80px !important;
    }

    .ps {
        padding: 0;
        margin: 0;
    }

    .percentage-value {
        display: block;
        margin-top: 10px;
        font-size: 28px;
    }

    .percentage-label {
        display: block;
        margin-top: 10px;
        font-size: 12px;
    }

    .demo-progress .el-progress--line {
        margin-bottom: 15px;
        width: 350px;
    }

    .demo-progress .el-progress--circle {
        margin-right: 15px;
    }

    .cardtop {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .margins {
            display: flex;
            font-size: 12px;

            p {
                margin-left: 10px;

                :deep(.el-color-picker .el-color-picker__icon) {
                    opacity: 0;
                }

                :deep(.el-color-picker__trigger) {
                    border: none;
                    width: 25px;
                    height: 25px;
                }
            }
        }
    }

    .box-card {
        margin-top: 20px;
    }

    .card {
        .ard {
            width: 100%;
            height: 40px;
            display: flex;
            align-items: center;
        }

        .icons {
            width: 80px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #a0cfff;
            color: #46a2ff;
            margin-right: 10px;
            border-radius: 7px;
            background-color: #ecf5ff;

            i {
                color: #1890ff;
                font-size: 14px;
                margin-right: 5px;
            }
        }
    }

    .asd {
        width: 300px;
        height: 33px;
        border-radius: 5px;
        border: 1px dotted #ccc;
        margin-left: 20px;
        display: flex;
        align-items: center;

        p {
            color: #606266;
            margin-left: 5px;
        }

        :deep(.el-input__wrapper) {
            border: none;
            box-shadow: none !important;
        }

        :deep(.el-date-editor.el-input) {
            width: 200px !important;
        }

        :deep(.el-select__wrapper) {
            border: none;
            box-shadow: none !important;
        }
    }

    :deep(.gantt_layout_cell) {
        border-radius: 7px;
    }

    :deep(.gantt_tree_indent) {
        opacity: 0;
    }

    :deep(.gantt_grid_scale .gantt_grid_head_cell) {
        color: #606266;
        font-size: 15px;
        font-weight: 700;
        border-right: 1px solid #ccc !important;
    }

    :deep(.gantt_scale_cell) {
        color: #454545 !important;
    }

    :deep(.gantt_grid_data .gantt_cell) {
        border-right: 1px solid #ccc !important;
        padding: 0;
    }

    :deep(.gantt_task_progress_wrapper) {
        border-radius: 5px;
    }

    :deep(.gantt_task_line.gantt_project) {
        border-radius: 5px;
        border: none;
    }

    :deep(.gantt_data_area div) {
        border-radius: 5px;
        // border:none;
    }

    :deep(.gantt_tree_content) {
        display: flex;
        align-items: center;

        .jindu {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #4482e3;
            border-radius: 10px;
        }

        .tasktype {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }

    :deep(.gantt_task_line) {
        border: none;
    }

    :deep(.gantt_link_point) {
        display: none !important;
    }

    :deep(.gantt_task_progress) {
        height: 100%;
    }

    .toppingTask {
        width: 200px;
        height: 200px;
        background-color: #1890ff;
    }
    .gantt_tree_icon {
        background-color: #fff;
        width: 16px;
        height: 16px;
    }
</style>
